
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>Metronic Frotnend | Features - Forms</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

   <!-- BEGIN GLOBAL MANDATORY STYLES -->          
   <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   <!-- END GLOBAL MANDATORY STYLES -->
   
   <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> 
   <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" /> 
   <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>              
   <!-- END PAGE LEVEL PLUGIN STYLES -->

   <!-- BEGIN THEME STYLES --> 
   <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
   <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
   <!-- END THEME STYLES -->

   <link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>
  <!-- BEGIN STYLE CUSTOMIZER -->
  <div class="color-panel hidden-sm">
    <div class="color-mode-icons icon-color"></div>
    <div class="color-mode-icons icon-color-close"></div>
    <div class="color-mode">
      <p>THEME COLOR</p>
      <ul class="inline">
        <li class="color-blue current color-default" data-style="blue"></li>
        <li class="color-red" data-style="red"></li>
        <li class="color-green" data-style="green"></li>
        <li class="color-orange" data-style="orange"></li>
      </ul>
            <label>
                <span>Header</span>
                <select class="header-option form-control input-small">
                    <option value="default" selected>Default</option>
                    <option value="fixed">Fixed</option>
                </select>
            </label>
    </div>
  </div>
  <!-- END BEGIN STYLE CUSTOMIZER -->  

    <!-- BEGIN HEADER -->
    <div class="header navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
                <button class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- END RESPONSIVE MENU TOGGLER -->
                <!-- BEGIN LOGO (you can use logo image instead of text)-->
                <a class="navbar-brand logo-v1" href="index.html">
                    <img src="assets/img/logo_blue.png" id="logoimg" alt="">
                </a>
                <!-- END LOGO -->
            </div>
        
            <!-- BEGIN TOP NAVIGATION MENU -->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                            Home
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Home Default</a></li>
                            <li><a href="page_home2.html">Home with Top Bar</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                            Pages
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="page_about.html">About Us</a></li>
                            <li><a href="page_services.html">Services</a></li>
                            <li><a href="page_prices.html">Prices</a></li>
                            <li><a href="page_faq.html">FAQ</a></li>
                            <li><a href="page_gallery.html">Gallery</a></li>
                            <li><a href="page_search_result.html">Search Result</a></li>
                            <li><a href="page_404.html">404</a></li>
                            <li><a href="page_500.html">500</a></li>
                            <li><a href="page_contacts.html">Contact</a></li>
                        </ul>
                    </li>
                    <li class="dropdown active">
                        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                            Features
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="feature_typography.html">Typography</a></li>
                            <li><a href="feature_buttons.html">Buttons</a></li>
                            <li class="active"><a href="feature_forms.html">Forms</a></li>
                            <li><a href="feature_icons.html">Icons</a></li>
                        </ul>
                    </li>                        
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                            Portfolio
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="portfolio_4.html">Portfolio 4</a></li>
                            <li><a href="portfolio_3.html">Portfolio 3</a></li>
                            <li><a href="portfolio_2.html">Portfolio 2</a></li>
                            <li><a href="portfolio_item.html">Portfolio Item</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                            Blog
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="blog.html">Blog Page</a></li>
                            <li><a href="blog_item.html">Blog Item</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html" target="_blank">Admin Theme</a></li>
                    <li class="menu-search">
                                  <span class="sep"></span>
                                  <i class="icon-search search-btn"></i>

                                  <div class="search-box">
                                      <form action="#">
                                          <div class="input-group input-large">
                                              <input class="form-control" type="text" placeholder="Search">
                                              <span class="input-group-btn">
                                                  <button type="submit" class="btn theme-btn">Go</button>
                                              </span>
                                          </div>
                                      </form>
                                  </div> 
                    </li>
                </ul>                         
            </div>
            <!-- BEGIN TOP NAVIGATION MENU -->
        </div>
    </div>
    <!-- END HEADER -->

    <!-- BEGIN PAGE CONTAINER -->  
    <div class="page-container">
	
        <!-- BEGIN BREADCRUMBS -->   
        <div class="row breadcrumbs margin-bottom-40">
            <div class="container">
                <div class="col-md-4 col-sm-4">
                    <h1>Forms</h1>
                </div>
                <div class="col-md-8 col-sm-8">
                    <ul class="pull-right breadcrumb">
						<li><a href="index.html">Home</a></li>
						<li><a href="">Features</a></li>
						<li class="active">Forms</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END BREADCRUMBS -->

		<!-- BEGIN CONTAINER -->   
		<div class="container min-hight">

			<!-- ROW 1 -->
			<div class="row margin-bottom-40">
            <div class="col-md-6 ">
               <!-- BLOCK START-->
                <div class="panel panel-default">   
                  	<div class="panel-heading"><h3 class="panel-title">Default Form</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label for="exampleInputEmail1">Text</label>
                              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter text">
                              <span class="help-block">A block of help text.</span>
                           </div>
                           <div class="form-group">
                              <label >Email Address</label>
                              <div class="input-group">
                                <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                <input type="text" class="form-control" placeholder="Email Address">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="exampleInputPassword1">Password</label>
                              <div class="input-group">
                                 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                 <span class="input-group-addon"><i class="icon-user"></i></span>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Left Icon</label>
                              <div class="input-icon">
                                 <i class="icon-bell"></i>
                                 <input type="text" class="form-control"  placeholder="Left icon">
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Right Icon</label>
                              <div class="input-icon right">
                                 <i class="icon-microphone"></i>
                                 <input type="text" class="form-control"  placeholder="Right icon">
                              </div>
                           </div>

                           <div class="form-group">
                              <label  >Input With Spinner</label>
                              <input class="form-control spinner" type="text" placeholder="Process something"/> 
                           </div>
                          
                           <div class="form-group">
                              <label >Static Control</label>
                              <p class="form-control-static">email@example.com</p>
                           </div>
                           <div class="form-group">
                              <label >Disabled</label>
                              <input type="text" class="form-control" placeholder="Disabled" disabled>
                           </div>
                           <div class="form-group">
                              <label >Readonly</label>
                              <input type="text" class="form-control" placeholder="Readonly" readonly>
                           </div>
                           <div class="form-group">
                              <label >Dropdown</label>
                              <select  class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Multiple Select</label>
                              <select multiple class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Textarea</label>
                              <textarea class="form-control" rows="3"></textarea>
                           </div>
                           <div class="form-group">
                              <label >File input</label>
                              <input type="file" >
                              <p class="help-block">some help text here.</p>
                           </div>
                           <div class="form-group">
                              <label  >Checkboxes</label>
                              <div class="checkbox-list">
                                 <label>
                                 <input type="checkbox"> Checkbox 1
                                 </label>
                                 <label>
                                 <input type="checkbox"> Checkbox 2
                                 </label>
                                  <label>
                                 <input type="checkbox" disabled> Disabled
                                 </label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Inline Checkboxes</label>
                              <div class="checkbox-list">
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option1"> Checkbox 1
                                 </label>
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option2"> Checkbox 2
                                 </label>
                                 <label class="checkbox-inline">
                                 <input type="checkbox"  value="option3" disabled> Disabled
                                 </label>  
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Radio</label>
                              <div class="radio-list">
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                 </label>
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option2" > Option 2
                                 </label>
                                 <label>
                                 <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                 </label>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  >Inline Radio</label>
                              <div class="radio-list">
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                 </label>
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option2" > Option 2
                                 </label>
                                 <label class="radio-inline">
                                 <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                 </label>  
                              </div>
                           </div>
                        </div>
                        <div class="form-actions">
                           <button type="submit" class="btn blue">Submit</button>
                           <button type="button" class="btn default">Cancel</button>                              
                        </div>                        
                     </form>
                   </div>
                </div>
               <!-- BLOCK END-->

              
               <!-- BLOCK START -->
               <div class="panel panel-primary">   
                  	<div class="panel-heading"><h3 class="panel-title">Default Form Height Sizing</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label >Large Input</label>
                              <input type="text" class="form-control input-lg"  placeholder="input-lg">
                           </div>
                           <div class="form-group">
                              <label >Default Input</label>
                              <input type="text" class="form-control"  placeholder="">
                           </div>
                           <div class="form-group">
                              <label >Small Input</label>
                              <input type="text" class="form-control input-sm"  placeholder="input-sm">
                           </div>
                           <div class="form-group">
                              <label >Large Select</label>
                              <select  class="form-control input-lg">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Default Select</label>
                              <select  class="form-control">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Small Select</label>
                              <select  class="form-control input-sm">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->   
               <div class="panel panel-success">
                  <div class="panel-heading"><h3 class="panel-title">Form Input Width Sizing</h3></div>
                    <div class="panel-body">
                     <form role="form">
                        <div class="form-body">

                            <div class="form-group">
                              <label >Fluid Input</label>
                              <input type="text" class="form-control"  placeholder="fluid">

                              <div class="input-icon right margin-top-10">
                                 <i class="icon-ok"></i>
                                 <input type="text" class="form-control"  placeholder="fluid">
                              </div>

                              <div class="input-icon margin-top-10">
                                 <i class="icon-user"></i>
                                 <input type="text" class="form-control"  placeholder="fluid">
                              </div>

                              <div class="input-group margin-top-10">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-xlarge">
                                 </div>

                                  <div class="input-group margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-xlarge">                                   
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                 </div>

                              <hr>

                           </div>

                           <div class="form-group">
                              <label >Extra Large Input</label>
                              <input type="text" class="form-control input-xlarge"  placeholder=".input-xlarge">

                              <div class="input-icon right input-xlarge margin-top-10">
                                 <i class="icon-ok"></i>
                                 <input type="text" class="form-control"  placeholder=".input-xlarge">
                              </div>

                              <div class="input-icon input-xlarge margin-top-10">
                                 <i class="icon-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-xlarge">
                              </div>

                              <div class="input-group input-xlarge margin-top-10">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-xlarge">
                                 </div>

                                  <div class="input-group input-xlarge margin-top-10">

                                   <input type="email" class="form-control" placeholder=".input-xlarge">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Large Input</label>
                              <input type="text" class="form-control input-large"  placeholder=".input-large">

                              <div class="input-icon right input-large margin-top-10">
                                 <i class="icon-ok"></i>
                                 <input type="text" class="form-control"  placeholder=".input-large">
                              </div>

                              <div class="input-icon input-large margin-top-10">
                                 <i class="icon-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-large">
                              </div>

                              <div class="input-group input-large margin-top-10">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-large">
                                 </div>

                              <div class="input-group input-large margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-large">                                   
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Medium Input</label>
                              <input type="text" class="form-control input-medium"  placeholder=".input-medium">


                              <div class="input-icon right input-medium margin-top-10">
                                 <i class="icon-ok"></i>
                                 <input type="text" class="form-control"  placeholder=".input-medium">
                              </div>

                              <div class="input-icon input-medium margin-top-10">
                                 <i class="icon-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-medium">
                              </div>

                              <div class="input-group input-medium margin-top-10">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-medium">
                                 </div>

                              <div class="input-group input-medium margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-medium">                                   
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                 </div>

                              <hr>

                           </div>
                           <div class="form-group">
                              <label >Small Input</label>
                              <input type="text" class="form-control input-small"  placeholder=".input-small">

                              <div class="input-icon right input-small margin-top-10">
                                 <i class="icon-ok"></i>
                                 <input type="text" class="form-control"  placeholder=".input-small">
                              </div>

                              <div class="input-icon input-small margin-top-10">
                                 <i class="icon-user"></i>
                                 <input type="text" class="form-control"  placeholder=".input-small">
                              </div>

                              <div class="input-group input-small margin-top-10">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder=".input-small">
                                 </div>

                              <div class="input-group input-small margin-top-10">
                                   <input type="email" class="form-control" placeholder=".input-small">                                   
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                 </div>

                           </div>
                           <div class="form-group">
                              <label >Extra Small Input</label>
                              <input type="text" class="form-control input-xsmall"  placeholder=".input-xsmall">
                           </div>
                           <div class="form-group">
                              <label >Extra Large Select</label>
                              <select  class="form-control input-xlarge">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Large Select</label>
                              <select  class="form-control input-large">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Medium Select</label>
                              <select  class="form-control input-medium">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Small Select</label>
                              <select  class="form-control input-small">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label >Extra Small Select</label>
                              <select  class="form-control input-xsmall">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                                 <option>Option 3</option>
                                 <option>Option 4</option>
                                 <option>Option 5</option>
                              </select>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                   </div>
                </div>
               <!-- BLOCK END -->
            </div>
            <div class="col-md-6 ">
               <!-- BLOCK START -->   
               <div class="panel panel-info">
                  	<div class="panel-heading"><h3 class="panel-title">Horizontal Form</h3></div>
                    <div class="panel-body">
                     <form class="form-horizontal" role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Text</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control"  placeholder="Enter text">
                                 <span class="help-block">A block of help text.</span>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Email Address</label>
                              <div class="col-md-9">
                                 <div class="input-group">
                                   <span class="input-group-addon"><i class="icon-envelope"></i></span>
                                   <input type="email" class="form-control" placeholder="Email Address">
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Password</label>
                              <div class="col-md-9">
                                 <div class="input-group">
                                    <input type="password" class="form-control"  placeholder="Password">
                                    <span class="input-group-addon"><i class="icon-user"></i></span>
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Left Icon</label>
                              <div class="col-md-9">
                                 <div class="input-icon">
                                    <i class="icon-bell"></i>
                                    <input type="text" class="form-control"  placeholder="Left icon">
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Right Icon</label>
                              <div class="col-md-9">
                                 <div class="input-icon right">     
                                    <i class="icon-microphone"></i>                             
                                    <input type="text" class="form-control"  placeholder="Right icon">
                                 </div>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Input With Spinner</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control spinner"  placeholder="Password">
                              </div>
                           </div>
                          
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Static Control</label>
                              <div class="col-md-9">
                                 <p class="form-control-static">email@example.com</p>
                              </div>
                           </div>

                           <div class="form-group">
                              <label  class="col-md-3 control-label">Disabled</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control"  placeholder="Disabled" disabled>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Readonly</label>
                              <div class="col-md-9">
                                 <input type="password" class="form-control"  placeholder="Readonly" readonly>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Dropdown</label>
                              <div class="col-md-9">
                                 <select  class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Multiple Select</label>
                              <div class="col-md-9">
                                 <select multiple class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Textarea</label>
                              <div class="col-md-9">
                                 <textarea class="form-control" rows="3"></textarea>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">File input</label>
                              <div class="col-md-9">
                                 <input type="file" >
                                 <p class="help-block">some help text here.</p>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Checkboxes</label>
                              <div class="col-md-9">
                                 <div class="checkbox-list">
                                    <label>
                                    <input type="checkbox"> Checkbox 1
                                    </label>
                                    <label>
                                    <input type="checkbox"> Checkbox 1
                                    </label>
                                    <label>
                                    <input type="checkbox" disabled> Disabled
                                    </label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Inline Checkboxes</label>
                              <div class="col-md-9">
                                 <div class="checkbox-list">
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option1"> Checkbox 1
                                    </label>
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option2"> Checkbox 2
                                    </label>
                                    <label class="checkbox-inline">
                                    <input type="checkbox"  value="option3" disabled> Disabled
                                    </label>  
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Radio</label>
                              <div class="col-md-9">
                                 <div class="radio-list">
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                    </label>
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option2" checked> Option 2
                                    </label>
                                    <label>
                                    <input type="radio" name="optionsRadios"  value="option2" disabled> Disabled
                                    </label>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label  class="col-md-3 control-label">Inline Radio</label>
                              <div class="col-md-9">
                                 <div class="radio-list">
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option1" checked> Option 1
                                    </label>
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option2" checked> Option 2
                                    </label>
                                    <label class="radio-inline">
                                    <input type="radio" name="optionsRadios"  value="option3" disabled> Disabled
                                    </label>  
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="form-actions fluid">
                           <div class="col-md-offset-3 col-md-9">
                              <button type="submit" class="btn green">Submit</button>
                              <button type="button" class="btn default">Cancel</button>                              
                           </div>
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->



               <!-- BLOCK START --> 
               <div class="panel panel-warning">  
                  	<div class="panel-heading"><h3 class="panel-title">Horizontal Form Height Sizing</h3></div>
                    <div class="panel-body">
                     <form class="form-horizontal" role="form">
                        <div class="form-body">
                           <div class="form-group">
                              <label class="col-md-3 control-label">Large Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control input-lg"  placeholder="Large Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Default Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control"  placeholder="Default Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Small Input</label>
                              <div class="col-md-9">
                                 <input type="text" class="form-control input-sm"  placeholder="Default Input">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Large Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control input-lg">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Default Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-3 control-label">Small Select</label>
                              <div class="col-md-9">
                                 <select  class="form-control input-sm">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->   
               <div class="panel panel-danger">
                  	<div class="panel-heading"><h3 class="panel-title">Fluid Input Groups</h3></div>
                    <div class="panel-body">
                     <h4 class="block">Checkboxe Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <h4 class="block">Buttons With Dropdowns</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group">
                              <input type="text" class="form-control">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                      <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Segmented Buttons</h4>
                     <form role="form">
                        <div class="row">
                             <div class="col-md-6">
                               <div class="input-group">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn default" tabindex="-1">Action</button>
                                   <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="icon-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                                 <input type="text" class="form-control">
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                             <div class="col-md-6">
                               <div class="input-group">
                                 <input type="text" class="form-control">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn green" tabindex="-1">Action</button>
                                   <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="icon-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu pull-right" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                           </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->


               <!-- BLOCK START -->   
               <div class="panel panel-primary">
                  <div class="panel-heading"><h3 class="panel-title">Fixed Input Groups</h3></div>
                  <div class="panel-body">
                     <h4 class="block">Checkboxe Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <span class="input-group-addon">
                                <input type="checkbox">
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Button Addons On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group input-large">
                              <span class="input-group-btn">
                                <button class="btn red" type="button">Go!</button>
                              </span>
                              <input type="text" class="form-control" placeholder=".input-large">
                              <span class="input-group-btn">
                                <button class="btn blue" type="button">Go!</button>
                              </span>
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <h4 class="block">Buttons With Dropdowns</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control" placeholder=".input-medium">
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                          <div class="col-md-6">
                            <div class="input-group input-medium">
                              <input type="text" class="form-control" placeholder=".input-medium">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                      <h4 class="block">Buttons With Dropdowns On Both Sides</h4>
                     <form role="form">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="input-group input-xlarge">
                              <div class="input-group-btn">
                                <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                              <input type="text" class="form-control" placeholder=".input-xlarge">
                              <div class="input-group-btn">
                                <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action <i class="icon-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                </ul>
                              </div><!-- /btn-group -->
                            </div><!-- /input-group -->
                          </div><!-- /.col-md-6 -->
                        </div><!-- /.row -->
                     </form>

                     <h4 class="block">Segmented Buttons</h4>
                     <form role="form">
                        <div class="row">
                             <div class="col-md-12">
                               <div class="input-group input-large">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn default" tabindex="-1">Action</button>
                                   <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="icon-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                                 <input type="text" class="form-control" placeholder=".input-large">
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                        </div>
                     </form>

                     <form role="form" class="margin-top-10">
                        <div class="row">
                             <div class="col-md-12">
                               <div class="input-group input-large">                                 
                                 <input type="text" class="form-control" placeholder=".input-large">
                                 <div class="input-group-btn">
                                   <button type="button" class="btn green" tabindex="-1">Action</button>
                                   <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                     <i class="icon-angle-down"></i>
                                   </button>
                                   <ul class="dropdown-menu" role="menu">
                                     <li><a href="#">Action</a></li>
                                     <li><a href="#">Another action</a></li>
                                     <li><a href="#">Something else here</a></li>
                                     <li class="divider"></li>
                                     <li><a href="#">Separated link</a></li>
                                   </ul>
                                 </div>
                               </div><!-- /.input-group -->
                             </div><!-- /.col-md-6 -->
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-success">
                <div class="panel-heading"><h3 class="panel-title">Validation States</h3></div>
                <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group has-success">
                             <label class="control-label" for="inputSuccess">Input with success</label>
                             <input type="text" class="form-control" id="inputSuccess">
                           </div>
                           <div class="form-group has-warning">
                             <label class="control-label" for="inputWarning">Input with warning</label>
                             <input type="text" class="form-control" id="inputWarning">
                           </div>
                           <div class="form-group has-error">
                             <label class="control-label" for="inputError">Input with error</label>
                             <input type="text" class="form-control" id="inputError">
                           </div>
                        </div>
                        <div class="form-actions">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn red">Submit</button>                            
                        </div>
                     </form>
                  </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-info">
                <div class="panel-heading"><h3 class="panel-title">Validation States With Icons</h3></div>
                <div class="panel-body">
                     <form role="form">
                        <div class="form-body">
                           <div class="form-group">
                             <label class="control-label" for="inputSuccess">Default input</label>
                             <div class="input-icon right">
                                 <i class="icon-info-sign tooltips" data-original-title="Email address" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-success">
                             <label class="control-label" for="inputSuccess">Input with success</label>
                             <div class="input-icon right">
                                 <i class="icon-ok  tooltips" data-original-title="You look OK!" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-warning">
                             <label class="control-label" for="inputWarning">Input with warning</label>
                             <div class="input-icon right">
                                 <i class="icon-warning-sign tooltips" data-original-title="please provide an email" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                           <div class="form-group has-error">
                             <label class="control-label" for="inputError">Input with error</label>
                             <div class="input-icon right">
                                 <i class="icon-exclamation-sign tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                 <input type="text" class="form-control" >
                             </div>
                           </div>
                        </div>
                        <div class="form-actions right">                           
                           <button type="button" class="btn default">Cancel</button>  
                           <button type="submit" class="btn green">Submit</button>                            
                        </div>
                     </form>
                    </div>
                </div>
               <!-- BLOCK END -->

               <!-- BLOCK START -->
               <div class="panel panel-warning">
                <div class="panel-heading"><h3 class="panel-title">Horizontal Form Validation States</h3></div>
                    <div class="panel-body">
                     <form role="form" class="form-horizontal">
                        <div class="form-body">
                           <div class="form-group">
                             <label class="col-md-4 control-label" for="inputSuccess">Default input</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="icon-info-sign tooltips" data-original-title="Email address" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-success">
                             <label class="col-md-4 control-label" for="inputSuccess">Input with success</label>
                             <div class="col-md-8">
                                <div class="input-icon right"> 
                                       <i class="icon-ok tooltips" data-original-title="You look OK!" data-container="body"></i>
                                       <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-warning">
                             <label class="col-md-4 control-label" for="inputWarning">Input with warning</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="icon-warning-sign tooltips" data-original-title="please provide an email" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                           <div class="form-group has-error">
                             <label class="col-md-4 control-label" for="inputError">Input with error</label>
                             <div class="col-md-8">
                                <div class="input-icon right">
                                    <i class="icon-exclamation-sign tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                    <input type="text" class="form-control" >
                                </div>
                             </div>
                           </div>
                        </div>
                        <div class="form-actions fluid">   
                           <div class="col-md-offset-4 col-md-8">                        
                              <button type="button" class="btn default">Cancel</button>  
                              <button type="submit" class="btn blue">Submit</button> 
                           </div>                           
                        </div>
                     </form>
                    </div>
                  </div>
                 <!-- BLOCK END -->

            </div>
			</div>
			<!-- END ROW 1 -->
					
		</div>
		<!-- END CONTAINER -->

    </div>
    <!-- END PAGE CONTAINER -->  
 
    <!-- BEGIN FOOTER -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4 space-mobile">
                    <!-- BEGIN ABOUT -->                    
                    <h2>About</h2>
                    <p class="margin-bottom-30">Vivamus imperdiet felis consectetur onec eget orci adipiscing nunc. Pellentesque fermentum, ante ac interdum ullamcorper.</p>
                    <div class="clearfix"></div>                    
                    <!-- END ABOUT -->          

                    <h2>Photos Stream</h2>
                    <!-- BEGIN BLOG PHOTOS STREAM -->
                    <div class="blog-photo-stream margin-bottom-30">
                        <ul class="list-unstyled">
                            <li><a href="#"><img src="assets/img/people/img5-small.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img1.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/people/img4-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img6.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/pics/img1-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/pics/img2-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img3.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/people/img2-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img2.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img5.jpg" alt=""></a></li>
                        </ul>                    
                    </div>
                    <!-- END BLOG PHOTOS STREAM -->                              
                </div>
                <div class="col-md-4 col-sm-4 space-mobile">
                    <!-- BEGIN CONTACTS -->                                    
                    <h2>Contact Us</h2>
                    <address class="margin-bottom-40">
                        Loop, Inc. <br />
                        795 Park Ave, Suite 120 <br />
                        San Francisco, CA 94107 <br />
                        P: (234) 145-1810 <br />
                        Email: <a href="mailto:info@keenthemes.com">info@keenthemes.com</a>                        
                    </address>
                    <!-- END CONTACTS -->                                    

                    <!-- BEGIN SUBSCRIBE -->                                    
                    <h2>Monthly Newsletter</h2>  
                    <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
                    <form action="#" class="form-subscribe">
                        <div class="input-group input-large">
                            <input class="form-control" type="text">
                            <span class="input-group-btn">
                                <button class="btn theme-btn" type="button">SUBSCRIBE</button>
                            </span>
                        </div>
                    </form>

                    <!-- END SUBSCRIBE -->                                    
                </div>
                <div class="col-md-4 col-sm-4">
                    <!-- BEGIN TWITTER BLOCK -->                                                    
                    <h2>Latest Tweets</h2>
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                            <span>3 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Sequat ipsum dolor onec eget orci fermentum condimentum lorem sit consectetur adipiscing
                            <span>8 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Remonde sequat ipsum dolor lorem sit consectetur adipiscing
                            <span>12 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Pilsum dolor lorem sit consectetur adipiscing orem sequat
                            <span>16 min ago</span>
                        </dd>
                    </dl>                    
                    <!-- END TWITTER BLOCK -->                                                                        
                </div>
            </div>
        </div>
    </div>
    <!-- END FOOTER -->

    <!-- BEGIN COPYRIGHT -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-8">
                    <p>
                        <span class="margin-right-10">2013 © Metronic. ALL Rights Reserved.</span> 
                        <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
                    </p>
                </div>
                <div class="col-md-4 col-sm-4">
                    <ul class="social-footer">
                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                        <li><a href="#"><i class="icon-google-plus"></i></a></li>
                        <li><a href="#"><i class="icon-dribbble"></i></a></li>
                        <li><a href="#"><i class="icon-linkedin"></i></a></li>
                        <li><a href="#"><i class="icon-twitter"></i></a></li>
                        <li><a href="#"><i class="icon-skype"></i></a></li>
                        <li><a href="#"><i class="icon-github"></i></a></li>
                        <li><a href="#"><i class="icon-youtube"></i></a></li>
                        <li><a href="#"><i class="icon-dropbox"></i></a></li>
                    </ul>                
                </div>
            </div>
        </div>
    </div>
    <!-- END COPYRIGHT -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>  
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
    <script src="assets/scripts/app.js"></script>  
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();     
            App.initUniform();                 
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>